<template>
  <div class="login-wrapper">
    <!--    <div class="login-icon">-->
    <!--      <img src="@/assets/login/title.png">-->
    <!--    </div>-->

    <div class="right-card">
      <div class="choose-language">
        <a-dropdown>
          <template #overlay>
            <a-menu v-model:selectedKeys="lang" @click="handleMenuClick">
              <a-menu-item :key="item.value" v-for="(item, index) in langList">{{ item.name }}</a-menu-item>
            </a-menu>
          </template>

          <GlobalOutlined style="font-size: 18px;" />

        </a-dropdown>

      </div>
      <div class="base-f20 base-text-center base-mb20">{{ $t('self.login.title') }}</div>
      <div class="password-login-form">
        <a-form
            :model="formState2"
            :label-col="{ span: 0 }"
            :wrapper-col="{ span: 24 }"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
        >
          <a-form-item
              label=""
              name="name"
              :rules="[{ required: true, message: $t('self.login.tips1') }]"
          >
            <a-input allow-clear v-model:value="formState2.name" :placeholder="$t('self.login.tips2')">
              <template #prefix>
                <UserOutlined style="color: rgba(0, 0, 0, 0.25)"/>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
              label=""
              name="pwd"
              :rules="[{ required: true, message: $t('self.login.tips3') }]"
              class="base-mb40"
          >
            <a-input-password v-model:value="formState2.pwd" :placeholder="$t('self.login.tips4')">
              <template #prefix>
                <LockOutlined style="color: rgba(0, 0, 0, 0.25)"/>
              </template>
            </a-input-password>
          </a-form-item>
<!--          <a-form-item name="remember" class="base-mb40">-->
<!--            <a-row>-->
<!--              <a-col span="12">-->
<!--                <a-checkbox v-model:checked="formState2.remember">{{ $t('self.login.tips8') }}</a-checkbox>-->
<!--              </a-col>-->
<!--              <a-col span="12" class="base-text-right forget-password">{{ $t('self.login.tips9') }}</a-col>-->
<!--            </a-row>-->
<!--          </a-form-item>-->
          <a-form-item>
            <a-button type="primary" html-type="submit" :loading="btnLoading" block class="submit-btn">{{ $t('self.login.loginText') }}</a-button>
          </a-form-item>
<!--          <div class="base-text-center">-->
<!--            {{ $t('self.login.tips10') }}<a href="">《{{ $t('self.login.tips11') }}》</a>{{ $t('self.and') }}<a href="">《{{ $t('self.login.tips12') }}》</a>-->
<!--          </div>-->
        </a-form>

      </div>
    </div>

  </div>
</template>

<script setup>
import { getCurrentInstance, inject, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { mainStore } from '@/stores/mainStore'
import { userStore } from '@/stores/userStore'
import { message } from 'ant-design-vue'

const { proxy } = getCurrentInstance()
const $TOOL = proxy.$TOOL
const $CONFIG = proxy.$CONFIG
const $API = proxy.$API

const useMainStore = mainStore()
const useUserStore = userStore()
const route = useRoute()
const router = useRouter()

const lang = ref([$TOOL.data.get('APP_LANG') || $CONFIG.LANG])
const langList = ref([
  {
    name: 'Chinese',
    value: 'zh-cn',
  },
  {
    name: 'English',
    value: 'en-us',
  },
  {
    name: 'Kinyarwanda',
    value: 'lwd',
  }
])

const formState2 = ref({
  name: '',
  pwd: '',
})
const btnLoading = ref(false)

const handleMenuClick = (e) => {
  const language = e.key
  proxy.$i18n.locale = useMainStore.lang = language
  lang.value = [language]
  // console.log('设置当前语言', proxy.$i18n.locale)
  $TOOL.data.set("APP_LANG", language)
}

const onFinish = (values) => {
  btnLoading.value = true

  // // 模拟用户资料
  // const res = {
  //   data: {
  //     tokeninfo: { token: 12345 },
  //     userinfo: {
  //       id: 1,
  //       nickname: '测试用户',
  //       username: formState2.value.name,
  //       role: ['user']  // 必填项
  //     },
  //   }
  // }

  $API.common.login.post(formState2.value).then( res => {
  //   console.log(res)
    const { objData } = res
    const token = objData.authToken
    const userInfo = objData.userData

    // 用ID来作为权限
    const permissionList = $TOOL.array.getColumn(userInfo.menus, 'id')

    $TOOL.cookie.set($CONFIG.TOKEN_KEY, token, {
      // expires: formEl.value.autologin? 24*60*60 : 0
      expires: 24 * 60 * 60 * 2
    })
    // 直接提交登录保存数据
    useUserStore.login(userInfo).then((res) => {
      message.success('登录成功', res)
      // proxy.getOrgSelectList(true) // 缓存运营商数据

      // 存储用户权限
      $TOOL.data.set($CONFIG.PERMISSIONS_KEY, permissionList)
      router.replace({
        path: '/'
      })
    })

  }).catch(err => {
    btnLoading.value = false
    message.error(err.msg)
  })

}

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo)
}

</script>

<style lang="scss" scoped>
.login-wrapper {
  width: 100%;
  height: 100vh;
  background: url("@/assets/login/bg.png") no-repeat;
  background-size: cover;

  .login-icon {
    width: 338px;
    height: 620px;
    cursor: pointer;
    position: fixed;
    left: 400px;
    top: 50%;
    transform: translateY(-50%);

    img {
      width: 100%;
      min-height: 80px;
    }
  }

  .right-card {
    position: fixed;
    width: 480px;
    //height: 620px;
    padding-top: 50px;
    padding-bottom: 52px;
    box-sizing: border-box;
    border-radius: 20px;
    right: 20%;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    box-shadow: 0 4px 20px 0 rgba(0, 54, 128, .08);

    .choose-language {
      position: absolute;
      right: 0;
      top: -10%;
    }

    :deep(.tabs) {
      .ant-tabs-nav:before {
        border-width: 0;
      }

      .ant-tabs-tab {
        padding: 0 0 10px 0;

        .ant-tabs-tab-btn {
          font-size: 20px;
          letter-spacing: 0;
          color: rgba(17, 31, 44, .6);
        }

        &.ant-tabs-tab-active {
          .ant-tabs-tab-btn {
            color: #111f2c;
            font-weight: 600;
          }
        }
      }

      .ant-tabs-ink-bar {
        background: none;
        display: flex;
        justify-content: center;
        height: 14px;

        &:after {
          position: relative;
          bottom: 0;
          display: block;
          content: '';
          width: 30px;
          height: 4px;
          border-radius: 2px;
          background-color: $primaryColor;
          margin-top: 10px;
          transition: transform .3s cubic-bezier(.645, .045, .355, 1), width .3s cubic-bezier(.645, .045, .355, 1), left .3s cubic-bezier(.645, .045, .355, 1);
        }
      }
    }

    .code-login-form,
    .password-login-form {
      padding: 8px 40px;

      :deep(.ant-form) {
        //min-height: 373px;
        color: rgba(0, 0, 0, .65);
        font-size: 13px;
        font-variant: tabular-nums;
        line-height: 1.5;
        list-style: none;
        font-feature-settings: "tnum";

        .ant-form-item {
          margin-bottom: 16px;

          .ant-input {
            background: #f2f4f9;
            color: #111f2c;
            border-radius: 2px;
            height: 50px;
            font-size: 16px;
            border: none;
            outline: none;
          }

          .ant-input-affix-wrapper {
            background: #f2f4f9;
            border: none;
          }

          .ant-select {
            .ant-select-selector {
              height: 58px;
              background: #f2f4f9;
              border: none;
              outline: none;
              box-shadow: none;
              border-radius: 2px 0 0 2px;

              .ant-select-selection-search-input {
                height: 58px;
              }

              .ant-select-selection-item {
                height: 58px;
                line-height: 58px;
              }
            }
          }

          .ant-checkbox-wrapper,
          .forget-password {
            color: rgba(17, 31, 44, .4);
          }

          .forget-password {
            &:hover {
              color: $primaryColor;
            }
          }

          .verify-btn {
            height: 50px;
            line-height: 50px;
            color: #b6babf;
            cursor: pointer;

            &.countdown {
              color: $primaryColor;
            }
          }

          .submit-btn {
            height: 50px;
            font-size: 16px;
            color: #fff;
          }
        }
      }
    }

    .scan-login-form {
      padding: 8px 80px 0;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.88);
      line-height: 1.5;

      .title {
        font-size: 20px;
        letter-spacing: 0;
        //color: rgba(17,31,44,.6);
        color: #111f2c;
        font-weight: 600;
      }

      .content {
        min-height: 370px;
      }

      img {
        width: 80%;
      }

      a {
        color: #155bd4;
        text-decoration: none;
        background-color: transparent;
        outline: none;
        cursor: pointer;
        transition: color 0.3s;
      }
    }
  }


}

@media screen and (max-width: 1920px) {
  .login-wrapper {
    .login-icon {
      left: 20% !important;
    }

    .right-card {
      right: 20% !important;
    }
  }
}


@media screen and (max-width: 1440px) {
  .login-wrapper {
    .login-icon {
      left: 15% !important;
    }

    .right-card {
      right: 15% !important;
    }
  }
}

</style>
